<template>
  <div id="suggest-page">
    <a-card style="margin-top: 20px">
      <title-component title-text=""></title-component>
      <div class="form-container">
        <a-form :model="suggestForm" :rules="suggestFormRules" ref="suggestFormRef" class="form">
          <div class="title">
            <div class="icon">
              <icon-send />
            </div>
            <div class="title-text">建议与反馈</div>
          </div>
          <a-form-item hide-label field="suggestType" validate-trigger="blur">
            <a-select v-model="suggestForm.suggestType" placeholder="请选择建议类型">
              <a-option v-for="item in suggestSelect" :key="item.value" :value="item.value">{{ item.label }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item hide-label field="suggestContent" validate-trigger="blur">
            <a-textarea
              :max-length="2000"
              show-word-limit
              v-model="suggestForm.suggestContent"
              placeholder="请输入建议内容"
            />
          </a-form-item>
          <a-form-item hide-label field="contactType" validate-trigger="blur">
            <a-select v-model="suggestForm.contactType" placeholder="请选择联系方式类型">
              <a-option value="手机"><icon-phone/> 手机</a-option>
              <a-option value="邮箱"><icon-email/> 邮箱</a-option>
              <a-option value="QQ"><icon-qq/> QQ</a-option>
              <a-option value="微信"><icon-wechat/> 微信</a-option>
            </a-select>
          </a-form-item>
          <a-form-item hide-label field="contact" validate-trigger="blur">
            <a-input v-model="suggestForm.contact" placeholder="请输入联系方式" />
          </a-form-item>
          <a-form-item hide-label>
            <a-button type="primary" long :loading="submitLoading" @click="onClickSubmit">提交</a-button>
            <a-button style="margin-left: 20px" long @click="suggestFormRef.resetFields()">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import TitleComponent from "@/components/TitleComponent.vue";
import { onMounted, ref } from "vue";
import {saveUserSuggest} from "@/api/user.js";
import { Notification } from "@arco-design/web-vue";

const suggestForm = ref({
  suggestType: "",
  suggestContent: "",
  contact: "",
  contactType: "",
});

const suggestFormRules = ref({
  suggestType: [
    { required: true, message: "请选择建议类型", trigger: "blur" },
  ],
  suggestContent: [
    { required: true, message: "请输入建议内容", trigger: "blur" },
    { max: 2048, message: "建议内容长度不能超过 2048 个字符", trigger: "blur" },
  ],
  contact: [
    { required: true, message: "请输入联系方式", trigger: "blur" },
    { max: 96, message: "联系方式长度不能超过 96 个字符", trigger: "blur" },
  ],
  contactType: [
    { required: true, message: "请选择联系方式类型", trigger: "blur" },
  ],
});

const suggestFormRef = ref();

const suggestSelect = [
  {
    label: "反馈",
    value: "反馈",
  },
  {
    label: "问题",
    value: "问题",
  },
  {
    label: "举报",
    value: "举报",
  },
  {
    label: "其他",
    value: "其他",
  }
];
const submitLoading = ref(false);

const onClickSubmit = () => {
  suggestFormRef.value.validate((valid) => {
    if (!valid) {
      submitLoading.value = true
      saveUserSuggest(suggestForm.value)
        .then(res => {
          if (res.data.code === 1) {
            suggestFormRef.value.resetFields()
            Notification.success({
              title: '提交成功',
              content: '感谢您的建议反馈，我们会尽快处理。',
              duration: 6000,
              closable: true
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          submitLoading.value = false
        })
    } else {
      console.log("submit!");
    }
  })
}

onMounted(() => {
  // 滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: "instant",
  });
});
</script>

<style scoped>
.form-container {
  display: flex;
  justify-content: center;
}

.form {
  width: 70%;
}

.title {
  display: flex;
}

.title .icon {
  font-size: 28px;
}

.title .title-text {
  font-size: 24px;
  color: var(--color-text-2);
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .form {
    width: 100%;
  }
}
</style>
